<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>墨阅书籍分类</title>
  <link rel="icon" href="../../img/logoimg.png" type="image/ico">
  <style>
    .btn{
      width: auto;
      height: 28px;
      border: none;
    }
    .btn-choose{
      background-color: #eac985;
      border-radius: 10%;
    }
    .btn-common{
      background-color: #f1efef;
    }
  </style>
</head>
<script type="application/javascript" src="../../js/jquery-3.6.0.min.js"></script>
<body onload="showType()">
  <div th:include="common/top"></div>
  <div id="load" th:include="common/load"></div>
  <div id="show" hidden>
    <div style="background-color: #f1efef;margin-top: 1%;margin-left: 5%;width: 90%;height: 300px">
      <div style="width: 95%;height: 90%;margin: 0 auto">
        <br>
        <form>
          <table>
            <tr>
              <td style="font-size: small;color: #5e5e5e;">作品频道：</td>
              <td>
                <div id="btype"></div>
              </td>
            </tr>
            <tr>
              <td style="font-size: small;color: #5e5e5e;width: 68px">作品分类：</td>
              <td>
                <div id="stype"></div>
              </td>
            </tr>
            <tr>
              <td style="font-size: small;color: #5e5e5e">作品字数：</td>
              <td>
                <input type="button" value="全部" name="bcBtn" onclick="setBookCount(-1,this)" class="btn btn-choose">&nbsp;
                <input type="button" value="30万以内" name="bcBtn" onclick="setBookCount(1,this)" class="btn btn-common">&nbsp;
                <input type="button" value="30万-50万" name="bcBtn" onclick="setBookCount(2,this)" class="btn btn-common">&nbsp;
                <input type="button" value="50万-100万" name="bcBtn" onclick="setBookCount(3,this)" class="btn btn-common">&nbsp;
                <input type="button" value="100万-200万" name="bcBtn" onclick="setBookCount(4,this)" class="btn btn-common">&nbsp;
                <input type="button" value="200万以上" name="bcBtn" onclick="setBookCount(5,this)" class="btn btn-common">
              </td>
            </tr>
            <tr>
              <td style="font-size: small;color: #5e5e5e">更新时间：</td>
              <td>
                <input type="button" value="全部" name="utBtn" onclick="setUpdateTime(-1,this)" class="btn btn-choose">&nbsp;
                <input type="button" value="3天内" name="utBtn" onclick="setUpdateTime(1,this)" class="btn btn-common">&nbsp;
                <input type="button" value="7天内" name="utBtn" onclick="setUpdateTime(2,this)" class="btn btn-common">&nbsp;
                <input type="button" value="30天内" name="utBtn" onclick="setUpdateTime(3,this)" class="btn btn-common">&nbsp;
              </td>
            </tr>
            <tr>
              <td style="font-size: small;color: #5e5e5e">是否完结：</td>
              <td>
                <input type="button" value="全部" name="speedBtn" onclick="setSpeed(-1,this)" class="btn btn-choose">&nbsp;
                <input type="button" value="已完结" name="speedBtn" onclick="setSpeed(1,this)" class="btn btn-common">&nbsp;
                <input type="button" value="连载中" name="speedBtn" onclick="setSpeed(0,this)" class="btn btn-common">&nbsp;
              </td>
            </tr>
          </table>
          <br>
          <input type="radio" value="1" name="m" onclick="setMethod(1)" checked>按点击量&nbsp;&nbsp;&nbsp;
          <input type="radio" value="2" name="m" onclick="setMethod(2)">按总字数&nbsp;&nbsp;&nbsp;
          <input type="radio" value="3" name="m" onclick="setMethod(3)">最近更新&nbsp;&nbsp;&nbsp;
          <!-- <input type="radio" value="4" name="method">按收藏数-->&nbsp;&nbsp;&nbsp;
          <input type="button" value="文字" name="stBtn" onclick="setShowType(2,this)" style="float: right"  class="btn btn-common">
          <input type="button" value="图文" name="stBtn" onclick="setShowType(1,this)" style="float: right" class="btn btn-choose">
          <input type="hidden" name="btype">
          <input type="hidden" name="stype">
          <input type="hidden" name="bookcount">
          <input type="hidden" name="updatetime">
          <input type="hidden" name="speed">
          <input type="hidden" name="method">
          <input type="hidden" name="showtype">
          <input type="hidden" name="key" id="key">
          <input type="hidden" name="cpage" id="cpage">
          <input type="hidden" name="pageSize" id="pageSize">
          <br>
        </form>
      </div>
    </div>
    <br>
    <div hidden id="load2" th:include="common/load"></div>
    <div style="margin-left: 5%;" id="getBook"></div>
  </div>

</body>
<script>
  $(function () {
    //获取父级类型
    getBigType();

    //获取子类类型
    getSmallType(-1);

    //获取全部书籍信息
    getBook(1,15);
  })

  //获取父级类型
  function getBigType(){
    $.ajax({
      url:"/type/queryBigTypeList",
      type:"get",
      dataType:"json",
      success:function (data){
       // console.log(data)
        $("#btype").append("<input type='button' value='全部' name='btypeBtn' onclick='setBtype(-1)' class='btn btn-choose' checked>&nbsp;")
        for (let i = 0; i < data.length; i++) {
          $("#btype").append("<input type='button' value='"+data[i].tname+"' onclick='setBtype("+data[i].tid+",\""+data[i].tname+"\")' name='btypeBtn' class='btn btn-common'>&nbsp;")
        }

      },error:function (){
        alert("查询频道失败");
      }
    })
  }

  function getSmallType(pid) {
    $("#stype").html("")
    $.ajax({
      url:"/type/querySmallTypeList",
      type:"get",
      data:{"pid":pid},
      dataType:"json",
      success:function (data){
        // console.log(data)
        $("#stype").append("<input type='button' value='全部' name='stypeBtn' onclick='setStype(-1)' class='btn btn-choose'>&nbsp;")
        for (let i = 0; i < data.length; i++) {
          $("#stype").append("<input type='button' value='"+data[i].tname+"' onclick='setStype("+data[i].tid+",\""+data[i].tname+"\")' name='stypeBtn' class='btn btn-common'>&nbsp;")
        }

      },error:function (){
        alert("查询作品类型失败");
      }
    })
  }

  //获取书籍信息
  function getBook(cpage,pageSize) {
    let key = $("input[name=keyPut]").val();
    $("#key").val(key);
    $("#cpage").val(cpage);
    $("#pageSize").val(pageSize);

    $.ajax({
      url:"/book/queryBookByFeiLei",
      data: $("form").serialize(),
      dataType:"html",
      success:function (data){
        $("#getBook").html(data);
      },error:function (){
        alert("查询书籍失败");
      }
    })
  }

  //设置频道
  function setBtype(tid,tname) {

    hideBook();

    if(tid==-1){
      setStype(-1,'全部');
    }
    $("input[name='btype']").val(tid);

    //修改按钮状态
    //点击后该按钮变红，其他按钮为蓝色
    $("input[name='btypeBtn']").each(function(){
      $(this).prop("class","btn btn-common");
    })
    if(tname==undefined){
      var tname="全部";
    }
    $("input[name='btypeBtn'][value='"+tname+"']").prop("class","btn btn-choose");

    //获取对应的书籍类型
    getSmallType(tid);
    //获取查询信息
    getBook(1,15);

    showBook();
  }

  //设置类型
  function setStype(tid,tname) {

    hideBook();

    $("input[name='stype']").val(tid);

    //修改按钮状态
    //点击后该按钮变红，其他按钮为蓝色
    $("input[name='stypeBtn']").each(function(){
      $(this).prop("class","btn btn-common");
    })
    if(tname==undefined){
      var tname="全部";
    }
    $("input[name='stypeBtn'][value='"+tname+"']").prop("class","btn btn-choose");

    //获取查询信息
    getBook(1,15);

    showBook();
  }

  //设置字数
  function setBookCount(bookcount,t) {

    hideBook();

    $("input[name='bookcount']").val(bookcount);

    //修改按钮状态
    //点击后该按钮变红，其他按钮为蓝色
    $("input[name='bcBtn']").each(function(){
      $(this).prop("class","btn btn-common");
    })

    $(t).prop("class","btn btn-choose");

    //获取查询信息
    getBook(1,15);

    showBook();
  }

  //设置进度
  function setSpeed(speed,t) {

    hideBook();

    $("input[name='speed']").val(speed);

    //修改按钮状态
    //点击后该按钮变红，其他按钮为蓝色
    $("input[name='speedBtn']").each(function(){
      $(this).prop("class","btn btn-common");
    })

    $(t).prop("class","btn btn-choose");

    //获取查询信息
    getBook(1,15);

    showBook();
  }

  //设置更新时间
  function setUpdateTime(ut,t) {

    hideBook();

    $("input[name='updatetime']").val(ut);

    //修改按钮状态
    //点击后该按钮变红，其他按钮为蓝色
    $("input[name='utBtn']").each(function(){
      $(this).prop("class","btn btn-common");
    })

    $(t).prop("class","btn btn-choose");

    //获取查询信息
    getBook(1,15);

    showBook();
  }
  //设置显示方式
  function setShowType(st,t) {
    hideBook();

    $("input[name='showtype']").val(st);

    //修改按钮状态
    //点击后该按钮变红，其他按钮为蓝色
    $("input[name='stBtn']").each(function(){
      $(this).prop("class","btn btn-common");
    })

    $(t).prop("class","btn btn-choose");

    //获取查询信息
    getBook(1,15);

    showBook();
  }

  function setMethod(method){
    hideBook();
    $("input[name='method']").val(method);
    //获取查询信息
    getBook(1,15);
    showBook();
  }
  function showType(){
    setTimeout(function () {
      $("#load").attr("hidden",true);
      $("#show").attr("hidden",false);
    },1000)
  }

  function hideBook(){
    $("#load2").attr("hidden",false);
    $("#getBook").attr("hidden",true);
  }
  function showBook(){
    setTimeout(function () {
      $("#load2").attr("hidden",true);
      $("#getBook").attr("hidden",false);
    },1000)
  }
</script>
</html>